<template>
	<view class="content">
		<custom-waterfalls-flow :value="list" :column="2"  @wapperClick="goTo" @imageClick="imageClick">
			<!-- #ifdef MP-WEIXIN -->
			<view class="item" v-for="(item,index) in list" :key="index" slot="slot{{index}}">
				<view class="title">{{item.title}}</view>
				<view class="information">
					<span class="wx_username">{{ item.nickname }}</span>
					<u-avatar :src="item.avatar" :size="30" style="vertical-align: middle;"></u-avatar>
					<view class="details_box">
						<view class="details">
							<u--image :showLoading="true" :src="likeIcon" width="16px" height="16px"></u--image>
						</view>
						<span>{{ item.likeNum }}</span>
					</view>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<template v-slot:default="item">
				<view class="item">
					<view class="title">{{item.title}}</view>
					<view class="information">
						<tn-avatar :src="item.avatar" class="vertical_middle"></tn-avatar>
						<span class="username">{{ item.nickname }}</span>
						<view class="like">
							<u--image :showLoading="true" :src="likeIcon" width="16px" height="16px" class="likeIcon"></u--image>
							<span>{{ item.likeNum }}</span>
						</view>
					</view>
				</view>
			</template>
			<!-- #endif -->
		</custom-waterfalls-flow>
	</view>
</template>

<script>
import { getDetailsList } from '@/pages/users/xingzu/config/api.js'

export default {
	props: {
		datalist: Array,
	},
	watch: {
		datalist(newVal, oldVal) {
			this.list = newVal
		},
	},
	data() {
		return {
			id: null,
			sort: '1',
			likeIcon: require('@/pages/users/static/xingzu/like.png'),
			isLikeIcon: require('@/pages/users/static/xingzu/isLike.png'),
			option: {
				size: 10,
				auto: false,
			},
			list: [
				// { id: 0, image: 'https://via.placeholder.com/200x500.png/ff0000', title: '周末一起去赶集，优质农产品带回家', isLike: true, isVideo: false }, 
				// { id: 1, image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', isLike: false, isVideo: true },
				// { id: 2, image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', isLike: false, isVideo: true },
				// { id: 3, image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', isLike: false, isVideo: false },
				// { id: 4, image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', isLike: false, isVideo: false },
			]
		}
	},
	methods: {
		goTo(item) {
			uni.navigateTo({
				url: '/pages/users/xingzu/imgDetails'
			})
		},
		imageClick(item) {
			uni.navigateTo({
				url: '/pages/users/xingzu/imgDetails'
			})
		},
	}
}
</script>

<style scoped>
.content {
	padding: 0 4px;
}
.item {
	background-color: #FFFFFF;
}
.title {
	color: #1A1A1A;
	font-size: 14px;
	padding: 6px 10px 0 10px;
}
.information {
	padding: 12px 10px 8px 10px;
}
.vertical_middle {
	vertical-align: middle;
}
.username {
	font-size: 12px;
	color: #808080;
	margin-left: 6px;
}
.wx_username {
	position: absolute;
	font-size: 12px;
	color: #808080;
	margin: 7px 36px;
}
.icons {
	width: 20px;
	height: 20px;
	vertical-align: middle;
}
.like {
	position: relative;
	margin: 8px 0 0 30px;
	color: #808080;
	font-size: 12px;
	float: right;
}
.likeIcon {
	float: left;
	vertical-align: middle;
	margin-right: 3px;
	margin-top: -1px;
}
.details {
	float: left;
	vertical-align: middle;
	margin: -1px 3px 0 0;
}
.details_box {
	position: relative;
	margin: -20px 0;
	color: #808080;
	font-size: 12px;
	float: right;
}
</style>